@import 'general';
.Q-Rollover.effect-03{
	// Initial
		img{.transition(all 200ms ease-in);}
		.mask{
			.translate-rotate(460px; -100px; 180deg);
			.transition(all 100ms 200ms ease-in-out);
		}
		h4{
			.translateY(-100px);
			.transition(all 200ms ease-in-out);
		}
		p{
			.translateX-rotate(300px; 90deg);
			.transition(all 200ms ease-in-out);
		}
		a.trigger{
			.translateY(-200px);
			.transition(all 200ms ease-in-out);
		}
	// animacion
		&:hover .mask{
			.opacity(1);
			.transition-delay(0sm);
			.translate(0px; 0px);
		}
		&:hover h4,
		&:hover p,
		&:hover a.trigger{
			.opacity(1);
		}
		&:hover h4{
			.translateY(0px);
			.transition-delay(500sm);
		}
		&:hover p{
			.translateX-rotate(0px; 0deg);
			.transition-delay(400ms);
		}
		&:hover a.trigger{
			.translateY(0px);
			.transition-delay(300ms);
		}
}